<template>
  <div class="login">
    <s-header :name="type === 'login' ? '登录' : '注册'"></s-header>
    <img class="logo" src="../../assets/images/s-bg.png" alt="" />
    <div class="login-body login" v-if="type == 'login'">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="username1"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password1"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            v-model="verify"
            name="验证码"
            label="验证码"
            placeholder="输入验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          >
            <template #button>
              <!-- 验证码 -->
              <vue-img-verify ref="verifyref"></vue-img-verify>
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 0.6827rem">
          <div class="link-register" @click="toggle('register')">立即注册</div>
          <van-button round block color="#1baeae" native-type="submit"> 登录 </van-button>
        </div>
      </van-form>
    </div>

    <div class="login-body register" v-else>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="username1"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password1"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            v-model="verify"
            name="验证码"
            label="验证码"
            placeholder="输入验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          >
            <template #button>
              <!-- 验证码 -->
              <vue-img-verify ref="verifyref"></vue-img-verify>
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 0.6827rem">
          <div class="link-login" @click="toggle('login')">已有登录账号</div>
          <van-button round block color="#1baeae" native-type="submit"> 注册 </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import vueImgVerify from "../../components/login/vue-img-identify.vue";
import sHeader from "../../components/login/simpleHeader.vue";

import { reactive, toRefs } from "@vue/reactivity";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import { useStore } from "vuex";

import { login, register } from "../../api/service/user";
export default {
  components: {
    sHeader,
    vueImgVerify,
  },
  setup() {
    const verifyref = ref(null);
    const router = useRouter();
    const store = useStore();
    const state = reactive({
      username1: "1234567",
      password1: "1234567",
      verify: "",
      type: "login",
    });
    const onSubmit = (values) => {
      //登录
      if (state.type == "login") {
        if (verifyCode(values)) {
          //  发接口请求
          login({
            username: values.username,
            userpwd: values.password,
          }).then((res) => {
            // console.log("登录接口返回的数据", res);
            if (res.code == 200) {
              window.localStorage.setItem("token", res.token);
              // console.log('登录成功，id',res.data.user_id)
              store.commit("reviseUserId", {
                status: res.data.user_id,
              });
              Toast.success(res.message);
              router.push("/qunar/index");
              // window.location.href = "/";
            }
          });
        } else {
          Toast("验证输入错误");
          state.verify = "";
        }
      }
      // 注册
      if (state.type == "register") {
        if (verifyCode(values)) {
          register({
            username: values.username,
            userpwd: values.password,
          }).then((res) => {
            if (res.code == 200) {
              Toast.success(res.message);
            }
          });
        } else {
          Toast("验证输入错误");
          state.verify = "";
        }
      }
    };
    // 校验验证码
    const verifyCode = () => {
      if (verifyref.value.imgCode === state.verify.toUpperCase()) {
        // 发请求
        return true;
      } else {
        return false;
      }
    };

    //
    const toggle = (v) => {
      state.type = v;
      state.verify = "";
    };
    return {
      ...toRefs(state),
      onSubmit,
      verifyref,
      toggle,
    };
  },
};
</script>

<style>
.logo {
  height: 5.12rem;
  display: block;
  margin: 3.4133rem auto 0.8533rem;
}
.login-body {
  padding: 0 0.8533rem;
}
.link-register,
.link-login {
  font-size: 0.5973rem;
  margin-bottom: 0.8533rem;
  color: #1989fa;
  display: inline-block;
}
</style>
